<template>
  <div class="v-toast-wrapper">
    <div class="v-modal-mask" v-show="isShowMask && show"></div>
    <transition name="v-toast">
      <div class="v-toast" v-show="show">
        <p class="v-toast-content">{{message}}</p>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'toast',
  props: {
    isShowMask: Boolean,
    duration: {
      type: Number,
      default: 2000,
    },
    message: String,
    show: Boolean,
  },
}
</script>

<style lang="scss">
.v-toast {
  position: fixed;
  text-align: center;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  border-radius: 4px;
  z-index: 8000;
  transition: opacity .3s linear;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 10px 20px;
  font-size: 14px;
}

.v-toast-enter,
.v-toast-leave-active {
  opacity: 0;
}
</style>
